<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col :span="24">
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true">
              <el-form-item label="搜索" label-width="80px" prop="oddNumber">
                <el-input v-model="list_params.oddNumber" placeholder="单据编号/合同号/货柜号" ></el-input>
              </el-form-item>
              <el-form-item label="货主" prop="cargoOwnerId">
                <el-select v-model="list_params.cargoOwnerId">
                  <el-option v-for="item in owner_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="productNames">
                <el-select filterable  v-model="list_params.productNames" placeholder="请选择产品" clearable  :style="{width: '100%'}">
                  <el-option label="全部产品" value=""></el-option>
                  <el-option v-for="item in all_product_list" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="垫款日期" prop="advanceDate">
                <el-date-picker
                  v-model="list_params.advanceDate"
                  type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
            <!--                      <el-button>删除</el-button>-->
            <!--                      <el-button @click="handleEnable(0)" >禁用</el-button>-->
            <!--                      <el-button @click="handleEnable(1)" >启用</el-button>-->
<!--            <el-button @click="handleExport">导出</el-button>-->
            <!--                      <el-button>导入</el-button>-->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="list_data" @selection-change="handleSelectionChange" :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="合同号" prop="contractNumber" width="180"></el-table-column>
            <el-table-column label="货柜号" prop="containerNumber"></el-table-column>
            <el-table-column label="单据编号" prop="oddNumber" width="140"></el-table-column>
            <el-table-column label="货主" prop="cargoOwnerName"></el-table-column>
            <el-table-column label="供货产品" prop="productNames"></el-table-column>
            <el-table-column label="供货品牌" prop="brandName"></el-table-column>
            <el-table-column label="总数量" prop="totalQty"></el-table-column>
            <el-table-column label="付汇金额" prop="totalRemittanceAmt">
              <template slot-scope="scope">
                {{ scope.row.totalRemittanceAmt ? Number(scope.row.totalRemittanceAmt).toLocaleString() : '' }}
              </template>
            </el-table-column>
            <el-table-column label="付汇金额大写" prop="totalRemittanceAmtInChinese">
              <template slot-scope="scope" >
                {{ numberToChinese(scope.row.totalRemittanceAmt) }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="状态" prop="supplyListStatus">
              <template slot-scope="scope" >
                <dict-tag :options="dict.type.supply_list_status" :value="scope.row.supplyListStatus"/>
              </template>
            </el-table-column> -->
<!--            <el-table-column label="垫款金额" prop="amount"></el-table-column>-->
            <!-- <el-table-column label="垫款日期" prop="advanceDate"></el-table-column> -->
            <el-table-column label="备注" prop="remark"></el-table-column>
            <el-table-column label="操作" prop="op" fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-drawer :title="form_data.id?'编辑付汇清单':'新增付汇清单'" size="80%" :visible.sync="dialog_show">
      <el-form  ref="form" :model="form_data"  size="small" :rules="formRule" :inline="true">
        <div>
          <div class="section">
            <el-row>
              <el-col :span="6" >
                <el-form-item label="供货单" prop="supplyListId">
                  <div v-if="form_data.id">{{form_data.contractNumber}}</div>
                  <el-select filterable  v-else placeholder="请选择" v-model="form_data.supplyListId" :style="{width: '100%'}" @change="onOrderChange" >
                    <el-option :label="item.contractNumber +' - '+item.containerNumber +' - '+item.cargoOwnerName" :value="item.id" v-for="item in supply_order_list"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <div style="padding-bottom: 12px;">供货单信息</div>
                <div>
                  <el-table :data="[info]" style="width: 100%" >
                    <el-table-column prop="containerNumber" label="货柜号">
                    </el-table-column>
                    <el-table-column prop="cargoOwnerName" label="货主">
                    </el-table-column>
                    <el-table-column prop="brandName" label="供货品牌">
                    </el-table-column>
                    <el-table-column prop="productNames" label="供货产品">
                    </el-table-column>
                    <el-table-column prop="totalQty" label="总数量">
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </div>
          
        <div class="section">
          <div style="padding-bottom: 12px;font-weight: bold;">付汇信息</div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="付汇资方" label-width="120px" prop="capitalId">
                <el-select filterable   style="width: 100%;" v-model="form_data.capitalId" placeholder="请选择"  >
                   <el-option v-for="owner in capital_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                 </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资方垫款金额" label-width="120px" prop="capitalAdvancePayment">
                <el-input v-model="form_data.capitalAdvancePayment" type="number"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付汇手续费(资方)" label-width="120px" prop="capitalHandlingFee">
                <el-input v-model="form_data.capitalHandlingFee" type="number"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付汇手续费" label-width="120px" prop="customerHandlingFee">
                <el-input v-model="form_data.customerHandlingFee" type="number"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预付款" label-width="120px" prop="advancePayment">
                <el-input v-model="form_data.advancePayment" type="number"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注" label-width="120px" prop="remark">
                <el-input v-model="form_data.remark" type="text"  ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
          <div class="section">
            <div style="padding-bottom: 12px;">付汇明细</div>
            <div>
              <el-table :data="fees" style="width: 100%" show-summary :summary-method="getSummary" >
                <el-table-column prop="date" label="序号" width="80">
                  <template slot-scope="scope" >
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="amountForeign" label="金额(外币)">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].amountForeign" type="number" @change="onAdvanceDetailChange(scope.$index,scope.row)"  ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="currency" label="币种">
                  <template slot-scope="scope" >
                    <el-select filterable   style="width: 100%;" v-model="fees[scope.$index].currency" placeholder="请选择"  >
                      <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                                 :value="dict.value"  ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="exchangeRate" label="汇率">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].exchangeRate" type="number" @change="onAdvanceDetailChange(scope.$index,scope.row)"  ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="amount" label="金额">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].amount" type="number"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="remittanceTime" label="付汇时间">
                  <template slot-scope="scope" >
<!--                    <el-input v-model="fees[scope.$index].advanceDate"></el-input>-->
                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"  v-model="fees[scope.$index].remittanceTime" style="width: 100%;"></el-date-picker>
                  </template>
                </el-table-column>
                
                <el-table-column prop="arrivalAmount" label="到账金额">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].arrivalAmount" type="number"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                  <template slot-scope="scope" >
                    <el-input v-model="fees[scope.$index].remark"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="操作">
                  <template slot-scope="scope" >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="scope.$index > 0"
                      @click="delFee(scope.row,scope.$index)"
                    >删除</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      @click="addFee(scope.row)"
                    >新增</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px;" class="custom-form-item">
              <el-row>
                <el-col :span="2">
                  <div style="line-height: 32px;font-size: 14px;font-weight: 700;color: #606266;">备注</div>
                </el-col>
                <!-- <el-col :span="22">
                  <el-form-item style="width: 100%;" label="" prop="remark" >
                    <el-input v-model="form_data.remark" placeholder="请输入" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col> -->
              </el-row>

            </div>
          </div>
          <div class="section">
            <el-row>
              <el-col :span="12">
                <div>
                  <div style="padding-bottom: 12px;">图片附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field101" :file-list="pictures" :action="uploadImgUrl" limit="10" multiple
                                 :headers="headers" :on-success="field101Success" :on-remove="field101Remove"
                                 :before-upload="field101BeforeUpload" list-type="picture-card" accept="image/*">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <div style="padding-bottom: 12px;">文件附件</div>
                  <div>

                    <el-form-item prop="pictures" label-width="0px" >
                      <el-upload ref="field102" :file-list="files" :action="uploadImgUrl" limit="10" multiple
                                 :headers="headers" :on-success="field102Success" :on-remove="field102Remove"
                                 :before-upload="field101BeforeUpload"  >
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>

          </div>
          <div class="section"></div>
          <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
            <el-button type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </el-form>
    </el-drawer>
    <el-drawer
      title="付汇单详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <el-form>
      <div class="section">
        <el-row>
          <el-col :span="4" class="section-item">
            <div class="section-item-title">供货单</div>
            <div>{{ supply_order_info.contractNumber }}</div>
          </el-col>
          <!-- <el-col :span="4" class="section-item">
            <div class="section-item-title">垫款日期</div>
            <div>{{info.advanceDate}}</div>
          </el-col> -->
          <el-col>
            <div style="padding-bottom: 12px;margin-top: 20px;font-weight: bold;">供货单信息</div>
            <div>
              <el-table :data="[supply_order_info]" style="width: 100%" >
                <el-table-column prop="containerNumber" label="货柜号">
                </el-table-column>
                <el-table-column prop="cargoOwnerName" label="货主">
                </el-table-column>
                <el-table-column prop="brandName" label="供货品牌">
                </el-table-column>
                <el-table-column prop="productNames" label="供货产品">
                </el-table-column>
                <el-table-column prop="totalQty" label="总数量">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>

        <div class="section">
          <div style="padding-bottom: 12px;font-weight: bold;">付汇信息</div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="付汇资方" label-width="120px" prop="capitalId">
                {{info.capitalName}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资方垫款金额" label-width="120px" prop="capitalAdvancePayment">
                {{info.capitalAdvancePayment}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付汇手续费(资方)" label-width="120px" prop="capitalHandlingFee">
                {{info.capitalHandlingFee}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付汇手续费" label-width="120px" prop="customerHandlingFee">
                {{info.customerHandlingFee}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预付款" label-width="120px" prop="advancePayment">
                {{info.advancePayment}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注" label-width="120px" prop="remark">
                {{info.remark}}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      <div class="section">
        <div style="padding-bottom: 12px;font-weight: bold;">付汇明细</div>
        <div>
          <el-table :data="info.remittanceDetails" style="width: 100%" show-summary :summary-method="getSummary" >
            <el-table-column prop="date" label="序号" width="80">
              <template slot-scope="scope" >
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="amountForeign" label="金额(外币)">

            </el-table-column>
            <el-table-column prop="currency" label="币种">
              <template slot-scope="scope" >
                <div v-if="scope.row.currency == ''">-</div>
                <div v-else >
                  <dict-tag :options="dict.type.currency" :value="scope.row.currency"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="exchangeRate" label="汇率">

            </el-table-column>
            <el-table-column prop="amount" label="金额">
            </el-table-column>
            <el-table-column prop="remittanceTime" label="付汇时间">
            </el-table-column>
            <el-table-column prop="arrivalAmount" label="到账金额">
            </el-table-column>
            <el-table-column prop="remark" label="备注">
            </el-table-column>
          </el-table>
        </div>
        <!-- <div style="margin-top: 10px;">
          <el-form-item label="备注"prop="remark">
            {{info.remark}}
          </el-form-item>
        </div> -->
      </div>

        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>图片附件</div>
              <div>
                <el-row :gutter="10">
                  <el-col v-for="item in imgs" :span="4" >
                    <el-image
                      style="width: 100%; height: 100px;"
                      :src="item.url"
                      :preview-src-list="imgs.map(img => img.url)"
                    >        </el-image>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div>文件附件</div>
              <div>
                <div v-for="item in docs" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section" style="display: flex;justify-content: flex-end;position: sticky;width: 100%;bottom: 0px;margin: 0px;">
          <el-button type="primary" @click="editInfo">编辑</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {detail as supplyOrderDetail,list as supplyOrderList} from "@/api/supply/order";
import {list as feeList} from "@/api/fee/fee";
import {list,add,detail,update,del} from "@/api/finance/remittance"
import {list as ownerList} from "@/api/base/owner"
import { getToken } from "@/utils/auth";
import { getUploadFiles,getUploadFileUrls } from '@/api/common'
import { AllList } from '@/api/product/info'
import {list as capitalList} from "@/api/base/capital"

export default {
  name: 'receive',
  dicts:['supply_list_status','currency'],
  data(){
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      pictures:[],
      files:[],
      table_height:window.innerHeight - 300,
      formRule:{
        supplyListId:[{
          required: true,
          message: '请选择供货单',
          trigger: 'change'
        }],
        advanceDate:[{
          required: true,
          message: '请选择垫款日期',
          trigger: 'change'
        }],
      },
      dialog_show:false,
      edit_dialog_show:false,
      fees:[{ remark:'',advanceDate:'',amount:'',amountForeign: '',currency:'',exchangeRate:'',arrivalAmount:'' }],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        contractNumber: '',
      },
      list_total:0,
      form_data:{supplyListId:''},
      list_data:[],
      supply_order_list:[],
      fees_sum:0,
      supply_order_info:{},
      info:{},
      all_product_list:[],
      owner_list:[],
      capital_list:[]
    }
  },
  created() {
    this.getList()
    this.getOwnerList()
    this.getAllProductList()
    this.getCapitalList()
  },
  methods:{
    getCapitalList(){
      capitalList({is_page:0}).then(res => {
        this.capital_list = res.rows;
      })
    },
    getOwnerList() {
      ownerList({is_page:0}).then(res => {
        this.owner_list = res.rows
      })
    },
    getAllProductList(){
      AllList().then(res => {
        this.all_product_list = res.rows;
      })
    },
    numberToChinese(num) {
      console.log(num)
      if (!num) return '';
      const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿'];
      const decimalUnits = ['角', '分'];

      // Convert to string and split integer and decimal parts
      const [integerPart, decimalPart = ''] = num.toString().split('.');

      // Convert integer part
      let result = '';
      let zero = false;
      let unit = 0;

      for (let i = integerPart.length - 1; i >= 0; i--) {
        const digit = parseInt(integerPart[i]);

        if (digit === 0) {
          if (!zero && result !== '') {
            zero = true;
            result = digits[0] + result;
          }
        } else {
          zero = false;
          if (unit === 4 && result.startsWith('万')) {
            result = digits[digit] + units[unit - 4] + result;
          } else {
            result = digits[digit] + units[unit] + result;
          }
        }

        unit++;
        if (unit === 4 && i > 0) {
          if (!result.startsWith('万')) {
            result = '万' + result;
          }
        } else if (unit === 8 && i > 0) {
          if (!result.startsWith('亿')) {
            result = '亿' + result;
          }
        }
      }

      // Add decimal part if exists
      if (decimalPart) {
        result += '元';
        for (let i = 0; i < decimalPart.length && i < 2; i++) {
          const digit = parseInt(decimalPart[i]);
          if (digit !== 0) {
            result += digits[digit] + decimalUnits[i];
          }
        }
      } else {
        result += '元整';
      }

      return result;
    },
    getSupplyOrderList(){
      supplyOrderList({
        // supplyListStatus:1,
        manageType:3,
        is_page:0
      }).then(res => {
        this.supply_order_list = res.rows;
      })
    },
    getList(){
      list(this.list_params).then(res => {
        this.list_data = res.rows;
        this.list_total = res.total
      })
    },
    handleQuery(){
      this.getList()
    },
    resetQuery(){
      this.list_params = {
        pageNum: 1,
        pageSize: 10,
        contractNumber: ''
      }
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delFee(row, index){
      this.fees.splice(index,1)
    },
    addFee(row){
      this.fees.push({ remark:'' })
    },
    submitData(){

      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log('submitData')
          let totalRemittanceForeign = 0;
          let totalRemittanceAmt = 0;
          this.fees.forEach(item => {
            item.amount = item.amount?item.amount:0;
            item.amountForeign = item.amountForeign?item.amountForeign:0;
            totalRemittanceForeign += parseFloat(item.amountForeign);
            totalRemittanceAmt += parseFloat(item.amount);
          })
          let form_data = {
            ...this.form_data,
            totalRemittanceForeign:totalRemittanceForeign.toFixed(2),
            totalRemittanceAmt:totalRemittanceAmt.toFixed(2),
            remittanceDetails:this.fees
          }
          if (form_data.id){
            console.log('update')
            update(form_data).then(res => {
              this.$message.success('修改成功')
              this.getList()
              this.dialog_show = false
            })
          }else{
            console.log('add')
            add(form_data).then(res => {
              this.$message.success('添加成功')
              this.getList()
              this.dialog_show = false
            })
          }
          console.log(this.form_data)
        } else {
          return false;
        }
      });
    },
    showInfo(info){
      this.info = {}
      this.supply_order_info = {}
      this.fees = []
      detail(info.id).then(res=>{
        this.info = res.data
        this.info.remittanceDetails.forEach(item => {
          item.currency = item.currency?item.currency + '':'';
        })
        supplyOrderDetail(res.data.supplyListId).then(res1 => {
          this.supply_order_info = {
            ...res1.data
          }
        })

        feeList({supplyListId:res.data.supplyListId,bizType:1}).then(res2 => {
          this.fees = res2.rows;
        })
        let imgs = res.data.imgFiles;
        let docs = res.data.docFiles;
        console.log(imgs)
        if (imgs != ''){
          getUploadFiles(imgs).then((img_res)=>{
            this.imgs = getUploadFileUrls(img_res.data);
          })
        }
        if (docs != ''){
          getUploadFiles(docs).then((img_res)=>{
            this.docs = getUploadFileUrls(img_res.data);
          })
        }
      })
      this.edit_dialog_show = true
    },
    delitem(row) {
      let id = row.id;
      del(id).then(res=>{
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getList()
      })
    },
    addInfo(){
      this.getSupplyOrderList()
      this.form_data = {}
      this.info = {}
      this.supply_order_info = {}
      this.fees = [{}]
      console.log(this.form_data)

      this.dialog_show = true
    },
    editInfo(){
      this.edit_dialog_show = false
      this.dialog_show = true
      this.fees = this.info.remittanceDetails;
      let supply_order= {contractNumber:this.info.contractNumber,id:parseInt(this.info.id)}
      this.getSupplyOrderList(supply_order)
      this.form_data = {
        ...this.info,
        advanceDate:this.info.advanceDate,
        amount:this.info.amount,
        totalPaymentAmt:this.getSumment()
      }
    },
    onOrderChange(e){
      console.log(e)
      this.supply_order_list.forEach(item => {
        if (item.id == e){
          this.info = item;
        }
      })
    },
    getSummary(params){
      const { columns, data } = params;
      const sums = [];
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]));
        if (index === 0) {
          sums[index] = '合计：'; // 首列添加自定义合计文字
          return;
        }else if (index === 1) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) { // 若不能转成数字就不进行累加
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);

          sums[index] = sums[index].toFixed(2)
        }else if (index === 4) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) { // 若不能转成数字就不进行累加
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2)
        } else {
          sums[index] = '';
        }

        console.log(sums[index])
        console.log('index:'+index)
      });
      this.fees_sum = sums[4];
      console.log(sums)
      return sums;
    },
    getSumment(){
      console.log(this.form_data.adjustmentAmt)
      console.log(isNaN(this.form_data.adjustmentAmt))
      let fees_sum = this.fees_sum == ''||isNaN(this.fees_sum) ? 0 : parseFloat(this.fees_sum);
      let serviceFee = this.form_data.serviceFee== ''||isNaN(this.form_data.serviceFee) ? 0 : parseFloat(this.form_data.serviceFee);
      let adjustmentAmt = this.form_data.adjustmentAmt == ''||isNaN(this.form_data.adjustmentAmt) ? 0 : parseFloat(this.form_data.adjustmentAmt);
      let totalPaymentAmt = fees_sum+serviceFee+adjustmentAmt;
      // this.form_data = {
      //   ...this.form_data,
      //   totalPaymentAmt:totalPaymentAmt
      // }
      return totalPaymentAmt;

      // parseFloat(fees_sum)+parseFloat(form_data.serviceFee)+parseFloat(form_data.adjustmentAmt)
    },
    field101BeforeUpload(file) {
      const postfix= file.name.substring(file.name.lastIndexOf('.')+1)
      if(!this.fileSuffix.includes(postfix)){
        this.$message.error('文件类型仅支持'+this.fileSuffix);
        return false
      }
      console.log(postfix)
    },
    field101Success(e){
      console.log('field101Success')
      console.log(e)
      let imgFiles = this.form_data.imgFiles?this.form_data.imgFiles:'';
      console.log(imgFiles)
      let imgs = imgFiles == ''?[]:imgFiles.split(',');
      imgs.push(e.data.id)
      this.form_data = {
        ...this.form_data,
        imgFiles:imgs.join(',')
      }
      console.log(this.form_data)
    },
    field101Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.form_data = {
        ...this.form_data,
        imgFiles:ids.join(','),
      }
    },
    field102BeforeUpload(file) {
    },
    field102Success(e){
      console.log(e)
      let docFiles = this.form_data.docFiles?this.form_data.docFiles:'';
      let docs = docFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.form_data = {
        ...this.form_data,
        docFiles:docs.join(',')
      }
    },
    field102Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.form_data = {
        ...this.form_data,
        docFiles:ids.join(','),
      }
    },
    openNav(url){
      window.open(url)
    },
    onAdvanceDetailChange(index,row){
      if (!isNaN(row.amountForeign)&&!isNaN(row.exchangeRate)){
        let amount = (row.amountForeign / row.exchangeRate).toFixed(2);
        this.$set(row,'amount',amount)
      }
    },
    onHandlingFeeChange(){
      let formData = this.form_data;
      if (!isNaN(formData.handlingFeeForeign)&&!isNaN(formData.handlingFeeExchangeRate)){
        let handlingFee = (formData.handlingFeeForeign / formData.handlingFeeExchangeRate).toFixed(2);
        // this.form_data.handlingFee = handlingFee
        this.$set(this.form_data,'handlingFee',handlingFee)
      }
    }
  }
}
</script>


<style scoped>
.section{
  background: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}
.custom-form-item .el-form-item__content{
  display: block;
}
</style>
